<script setup>
import { ref } from "vue";

const menuState = ref(false);
const test = () => {
    menuState.value = !menuState.value;
    document.documentElement.classList.toggle('overflow-hidden')
};
</script>
<template>
    <nav>
        <ul
            :class="{
                'translate-x-0': menuState,
                '-translate-x-full': !menuState,
            }"
            class=" md:translate-x-0 md:flex md:items-center md:gap-x-6 md:flex-wrap md:static md:w-auto md:h-auto md:bg-inherit md:p-0 fixed h-screen w-full top-0 left-0 bg-slate-50 px-2 pt-20 z-40 flex flex-col gap-y-4 md:flex-row transition-transform"
        >
            <slot />
        </ul>

        <button class="md:hidden block z-50 relative w-10 " @click="test">
            <svg
                
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
            >
                <path
                    d="M4 18L20 18"
                    stroke="#000000"
                    stroke-width="2"
                    stroke-linecap="round"
                />
                <path
                    d="M4 12L20 12"
                    stroke="#000000"
                    stroke-width="2"
                    stroke-linecap="round"
                />
                <path
                    d="M4 6L20 6"
                    stroke="#000000"
                    stroke-width="2"
                    stroke-linecap="round"
                />
            </svg>
        </button>
    </nav>
</template>
